<template>
  <div class="plat-item">
    <div class="pi-top-boc">
      <div class="pt-item pt-item-first">
        <img :src="productInfo.fundLogo"><br/>
<!--        <span>{{ productInfo.fundName }}</span>-->
      </div>
    </div>
    <div class="pi-top-boc">
      <div class="pt-item">
        <span class="hi-left">{{ ((productInfo.interestRate*100/12)*10).toFixed(2) }}‰</span>
        <br>
        <span class="hi-bottom">月利率</span>
      </div>
    </div>
    <div class="pi-top-boc">
      <div class="pt-item">
        <span class="hi-left hi-right">最长180天</span>
        <br>
        <span class="hi-bottom">借款形式</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "platHeader",
  props:{
    productInfo: {
      type: Object,
      default: {}
    },
  }
}
</script>

<style lang="scss">
.plat-item {
  width: 100%;
  padding: 0 40px;
  height: 95px;
  background-repeat: no-repeat;
  background-position: 50px 8px;
  margin: 15px auto 12px auto;

  .pi-top-boc {
    width: 32%;
    float: left;

    .pt-title {
      border: 1px solid #FFA01D;
      color: #FFA01D;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 14px;
      margin-left: 16px;
    }

    .pt-item {
      margin-top: 28px;
      text-align: center;

      .hi-left {
        color: #FFA01D;
        font-size: 20px;
        font-weight: bolder;
      }

      .hi-right {
        color: #FFA01D;
        font-size: 14px;
      }

      .hi-bottom {
        font-size: 14px;
        padding-top: 8px;
        color: #6C6C6C;
        display: block;
      }

    }

    .pt-item-first {
      margin-top: 10px;

      img {
        height: 65px;
      }

      span {
        font-size: 12px;
        font-weight: bold
      }
    }

    .pt-last {
      margin-left: 40px;
    }

  }

  .pi-top-boc:first-child {
    width: 20%;
  }

}
</style>
